<template>
  <ex-dialog
    width="1100px"
    class="ex-diolog"
    title=""
    :visible="visible"
    @closeDialog="handleClose"
  >
    <el-button @click="backList" type="primary" plain>返回列表</el-button>
    <div class="table_title">提现基本信息</div>
    <div class="table_box">
      <div class="table_detail">
        <div class="table_detail_l">提现单号</div>
        <div class="table_detail_r">{{ info.id }}</div>
      </div>
      <div class="table_detail">
        <div class="table_detail_l">提现金额</div>
        <div class="table_detail_r">￥ {{ info.applyMoney }}</div>
      </div>
      <div class="table_detail">
        <div class="table_detail_l">到账金额</div>
        <div class="table_detail_r">￥ {{ info.realApplyMoney }}</div>
      </div>
      <div class="table_detail">
        <div class="table_detail_l">申请时间</div>
        <div class="table_detail_r">{{ info.applyTime }}</div>
      </div>
      <div class="table_detail">
        <div class="table_detail_l">申请人</div>
        <div class="table_detail_r">{{ info.applicant }}</div>
      </div>
      <div class="table_detail">
        <div class="table_detail_l">审核时间</div>
        <div class="table_detail_r">{{ info.auditTime }}</div>
      </div>
      <div class="table_detail" style="border-bottom: 0;">
        <div class="table_detail_l">审核人</div>
        <div class="table_detail_r">{{ info.reviewer }}</div>
      </div>
    </div>
    <div class="table_title">房租缴纳证明：
    </div>
    <el-image class="imgs" v-for="url in info.rentPaymentList" :key="url" :src="url" :preview-src-list="info.rentPaymentList" />
    <div class="table_title">水电缴纳证明：
    </div>
    <el-image class="imgs" v-for="url in info.hydropowerList" :key="url" :src="url" :preview-src-list="info.hydropowerList" />
    <div class="table_title">员工工资证明：
    </div>
    <el-image class="imgs" v-for="url in info.staffList" :key="url" :src="url" :preview-src-list="info.staffList" />
    <div class="table_title">划付比例：{{ info.applyRemitRatio }}%</div>
    
    <div class="table_title">提现详细信息</div>
    <el-table :data="info.detailList" style="width: 100%;" stripe border>
      <el-table-column prop="cardNo" label="卡号" align="center"> </el-table-column>
      <el-table-column prop="insDepositMoney" label="保险存管余额" align="center"> </el-table-column>
      <el-table-column prop="applyMoney" label="提现金额" align="center"> </el-table-column>
      <el-table-column prop="realMoney" label="到账金额" align="center"> </el-table-column>
      <el-table-column prop="ratio" label="申请划付比例" align="center"> </el-table-column>
      <el-table-column prop="remark" label="备注" align="center"> </el-table-column>
    </el-table>
  </ex-dialog>
</template>
<script>
// components
import {
  withdrawDetail
} from "@/api/moneyManagement";
import Loading from "@/components/Loading/index";
export default {
  components: {
    Loading,
  },
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    return {
      loading: false,
      info: {},
      srcList: []
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    backList(){ //返回列表
      this.handleClose();
    },
    //获取详情
    getDetail() {
      this.loading = true;
      withdrawDetail(this.id)
        .then((res) => {
          const { result } = res;
          this.info = result;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.buttom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 150px;
  margin-top: 30px;
}
.txt {
  font-size: 15px;
  margin-bottom: 20px;
}
.refuseMain {
  ::v-deep .el-radio-group {
    display: flex !important;
    flex-direction: column !important;
  }
  .el-radio {
    margin-bottom: 15px !important;
    margin-left: 20px !important;
  }
  .el-input--medium {
    font-size: 14px;
    margin-left: 44px;
  }
  .el-textarea {
    width: 90%;
  }
}
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
  }

  .main {
    margin: 0 auto;
  }
  .pic-list {
    display: flex;
    justify-content: space-around;
    width: 660px;
  }
  .img {
    display: block;
    width: 200px;
    height: auto;
  }
}
.table_title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 20px;
}
.table_box{
  border: 1px solid #dfe6ec;
}
.table_detail{
  height: 44px;
  display: flex;
  font-size: 15px;
  border-bottom: 1px solid #dfe6ec;
}
.table_detail_l{
  border-right: 1px solid #dfe6ec;
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table_detail_r{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img_list{
  display: flex;
  margin: 20px 0 40px;
}
.img_list_box{
  margin-right: 10px;
}

.table_title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: 20px;
}

.imgs {
  width: 80px;
  height: 80px;
  margin: 0 10px 0 0;
}
</style>
